<template>
  <div class="w-full h-full flex flex-wrap md:flex-nowrap relative">
    <div class="w-full relative" :class="commentShow ? 'h-[40%] md:h-full' : 'h-full'">
      <videoPlay v-bind="options" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" />
    </div>
    <div v-if="videoInfo.videoId" :class="commentShow ? 'md:block hidden' : ''"
      class="absolute bottom-[10%] right-1 z-[99]">
      <div class="pb-7 flex justify-center relative avatar-box">
        <a :href="`/user/${videoInfo.author.userId ? videoInfo.author.userId : -1
          }`" target="_blank" rel="noopener noreferrer">
          <el-avatar :size="50" :src="videoInfo.author.avatar
            ? videoInfo.author.avatar
            : USER_DEFAULT_AVATAR
            " />
        </a>
        <div @click="toConcern" class="cursor-pointer absolute top-[2.7rem] w-5 h-5 p-1 rounded-full bg-red-500">
          <svg t="1698308944509" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4799">
            <path
              d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
              p-id="4800"></path>
          </svg>
        </div>
      </div>
      <div class="pb-3 text-center">
        <div @click="toLike" class="button-svg-box">
          <svg t="1698249338472" :class="likeFlag ? ' fill-[#fe2c55]' : 'fill-gray-500'" class="icon"
            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6126" width="20" height="20">
            <path
              d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z"
              p-id="6127"></path>
          </svg>
        </div>
        <span class="button-svg-text">{{
          videoInfo.favoriteCount > 9999
          ? (videoInfo.favoriteCount / 10000).toFixed(1) + "万"
          : videoInfo.favoriteCount
        }}</span>
      </div>

      <div class="pb-3 text-center">
        <div @click="commentShow = !commentShow" class="button-svg-box">
          <svg t="1698249561375" class="icon fill-gray-500" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="8012" width="20" height="20">
            <path
              d="M850.879104 96.41591l-676.303067 0c-60.681034 0-110.049418 49.367361-110.049418 110.049418l0 446.200388c0 60.681034 49.367361 110.049418 110.049418 110.049418l90.307795 0L396.936381 931.129846c3.793396 4.838192 9.598612 7.66354 15.746636 7.66354s11.952216-2.825348 15.746636-7.66354l132.052548-168.414711 290.396903 0c60.681034 0 110.049418-49.367361 110.049418-110.049418L960.928522 206.465329C960.928522 145.784294 911.561162 96.41591 850.879104 96.41591zM920.91111 652.665717c0 38.614459-31.416524 70.030983-70.030983 70.030983L550.744419 722.6967c-6.147 0-11.952216 2.825348-15.745612 7.66354L412.683017 886.356107l-122.31579-155.995867c-3.792373-4.838192-9.597589-7.66354-15.745612-7.66354l-100.045577 0c-38.614459 0-70.030983-31.416524-70.030983-70.030983L104.545054 206.465329c0-38.614459 31.416524-70.030983 70.030983-70.030983l676.303067 0c38.614459 0 70.030983 31.416524 70.030983 70.030983L920.910087 652.665717z"
              p-id="8013"></path>
            <path
              d="M272.621051 344.526731c-44.132126 0-80.035848 35.903721-80.035848 80.035848 0 44.132126 35.903721 80.036871 80.035848 80.036871s80.035848-35.904745 80.035848-80.036871C352.655875 380.430452 316.752154 344.526731 272.621051 344.526731zM272.621051 464.582037c-22.065552 0-40.017412-17.951861-40.017412-40.018436 0-22.065552 17.952884-40.017412 40.017412-40.017412 22.065552 0 40.017412 17.951861 40.017412 40.017412C312.638463 446.629153 294.686602 464.582037 272.621051 464.582037z"
              p-id="8014"></path>
            <path
              d="M512.727571 344.526731c-44.132126 0-80.035848 35.903721-80.035848 80.035848 0 44.132126 35.903721 80.036871 80.035848 80.036871 44.132126 0 80.035848-35.904745 80.035848-80.036871C592.763418 380.430452 556.859697 344.526731 512.727571 344.526731zM512.727571 464.582037c-22.065552 0-40.017412-17.951861-40.017412-40.018436 0-22.065552 17.951861-40.017412 40.017412-40.017412 22.065552 0 40.017412 17.951861 40.017412 40.017412C552.746006 446.629153 534.793122 464.582037 512.727571 464.582037z"
              p-id="8015"></path>
            <path
              d="M752.836137 344.526731c-44.131103 0-80.035848 35.903721-80.035848 80.035848 0 44.132126 35.904745 80.036871 80.035848 80.036871s80.035848-35.904745 80.035848-80.036871C832.871985 380.430452 796.96724 344.526731 752.836137 344.526731zM752.836137 464.582037c-22.066575 0-40.017412-17.951861-40.017412-40.018436 0-22.065552 17.951861-40.017412 40.017412-40.017412s40.017412 17.951861 40.017412 40.017412C792.853549 446.629153 774.902712 464.582037 752.836137 464.582037z"
              p-id="8016"></path>
          </svg>
        </div>
        <span class="button-svg-text">{{
          videoInfo.commentCount > 9999
          ? (videoInfo.commentCount / 10000).toFixed(1) + "万"
          : videoInfo.commentCount
        }}</span>
      </div>

      <div class="pb-3 text-center">
        <div @click="toCollect" class="button-svg-box">
          <svg t="1698284598196" :class="collectFlag ? ' fill-[#fcb602]' : 'fill-gray-500'" class="icon"
            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4165" width="24" height="24">
            <path
              d="M519.2 807.2l255.2 133.6c12 6.4 25.6-4 23.2-16.8L748.8 640c-0.8-4.8 0.8-10.4 4.8-14.4L960 424.8c9.6-9.6 4-25.6-8.8-27.2l-284.8-41.6c-5.6-0.8-9.6-4-12-8.8l-128-257.6c-5.6-12-23.2-12-28.8 0L370.4 348c-2.4 4.8-7.2 8-12 8.8L73.6 398.4c-13.6 1.6-18.4 17.6-8.8 27.2l206.4 200.8c4 4 5.6 8.8 4.8 14.4l-48.8 284c-2.4 12.8 11.2 23.2 23.2 16.8L505.6 808c4-3.2 8.8-3.2 13.6-0.8z"
              p-id="4166"></path>
          </svg>
        </div>
        <span class="button-svg-text">{{
          videoInfo.favoriteCount > 9999
          ? (videoInfo.favoriteCount / 10000).toFixed(1) + "万"
          : videoInfo.favoriteCount
        }}</span>
      </div>

      <div class="text-center">
        <div class="button-svg-box">
          <svg t="1698249681096" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="9008" width="20" height="20">
            <path
              d="M919.272727 416.581818L607.418182 79.127273c-11.636364-11.636364-32.581818-11.636364-44.218182 0-6.981818 6.981818-9.309091 16.290909-9.309091 25.6v181.527272c-258.327273 0-465.454545 207.127273-465.454545 463.127273 0 62.836364 13.963636 125.672727 39.563636 183.854546 37.236364-193.163636 221.090909-339.781818 425.890909-339.781819v181.527273c-2.327273 9.309091 2.327273 18.618182 9.309091 25.6 4.654545 6.981818 13.963636 9.309091 23.272727 9.309091s18.618182-4.654545 23.272728-11.636364L919.272727 465.454545c6.981818-6.981818 9.309091-13.963636 9.309091-23.272727s-4.654545-18.618182-9.309091-25.6z"
              p-id="9009"></path>
          </svg>
        </div>
      </div>
    </div>
    <div v-if="videoInfo.videoId" class="absolute w-full h-20 bottom-20 md:px-8 px-4 z-50">
      <div class="flex items-center mb-1">
        <span class="inline-flex items-center text-white mr-4"><span class="text-[1.5rem] mr-1">@</span>{{
          videoInfo.author.nickname }}</span>
        <span class="text-[#ddd] little-text">· {{ videoInfo.createAt.substring(0, 10) }}</span>
      </div>
      <span class="text-[#ddd] text-[14px] mb-1 block">{{
        videoInfo.title
      }}</span>
      <ul class="tabs-ul">
        <li v-for=" tab in videoInfo.tabs">#{{ tab }}</li>
      </ul>
    </div>
  </div>

  <comment class="block bg-[var(--comment-bgColor)] duration-300" :class="commentShow
    ? ' w-[100vw] h-[60vh] md:w-[30rem] md:h-full'
    : 'w-full h-0 md:h-full md:w-0'
    ">

  </comment>
</template>

<script setup>
import { reactive, ref, watch } from "vue";


import { USER_DEFAULT_AVATAR } from "@/define/cizzy";

import "vue3-video-play/dist/style.css"; // 引入css

import videoPlay from 'vue3-video-play';

const props = defineProps({
  videoToView: {
    type: Object,
  },
});

const { videoToView } = props;

watch(videoToView, (newVal, oldVal) => {
  videoInfo.videoId = newVal.info.videoId;
  videoInfo.createAt = newVal.info.createAt;
  videoInfo.title = newVal.info.title;
  videoInfo.description = newVal.info.description;
  videoInfo.cryptoTitle = newVal.info.cryptoTitle;
  videoInfo.type = newVal.info.type;
  videoInfo.favoriteCount = newVal.info.favoriteCount;
  videoInfo.commentCount = newVal.info.commentCount;
  videoInfo.videoUrl = newVal.info.videoUrl;
  videoInfo.tabs = newVal.info.tabs ? newVal.info.tabs : [];
  videoInfo.author.userId = newVal.info.author.userId;
  videoInfo.author.avatar = newVal.info.author.avatar;
  videoInfo.author.nickname = newVal.info.author.nickname ? newVal.info.author.nickname : '未知用户';
  console.log("videoInfo", newVal);
});

const videoInfo = reactive({
  videoId: "",
  createAt: "",
  title: "",
  description: "",
  cryptoTitle: "",
  type: "",
  favoriteCount: "",
  videoUrl: "",
  tabs: [
    '幻想',
    '美少女',
    '动漫',
    '安静'
  ],
  author: {
    userId: "",
    nickname: "Crissy-匿名用户",
    avatar: USER_DEFAULT_AVATAR,
  },
});

let commentShow = ref(false);


const options = reactive({
  width: '100%', //播放器高度
  height: '100%', //播放器高度
  color: "#409eff", //主题色
  title: '', //视频名称
  // src: videoInfo.videoUrl, //视频源
  src: 'http://resource.crissy.info/video/2_00_AM.mp4',
  // type: 'm3u8', //视频类型
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: true, //自动播放
  loop: true, //循环播放
  mirror: false, //镜像画面
  ligthOff: false,  //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
})

const onPlay = (ev) => {
  console.log('播放')
}
const onPause = (ev) => {
  console.log(ev, '暂停')
}

const onTimeupdate = (ev) => {
  console.log(ev, '时间更新')
}
const onCanplay = (ev) => {
  console.log(ev, '可以播放')
}
</script>

<style lang="scss" scoped>
#mse {
  font-family: var(--svg-font-family);
}

.avatar-box {
  svg {
    fill: white;

    &:active {
      transform: scale(0.9);
    }
  }
}

.button-svg-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 auto;
  border-radius: 999px;
  background: #e5e7eb;
  padding: 0.5rem;

  cursor: pointer;
}

.button-svg-text {
  color: #e5e7eb;
  font-size: 12px;
  font-family: var(--svg-font-family);
}

.tabs-ul {
  display: flex;
  align-items: center;

  li {
    display: flex;
    cursor: pointer;
    margin-right: 1rem;
    justify-content: center;
    align-items: center;
    color: var(--logo-color);
  }
}
</style>